/**
 * Property
 */

 import Content from "./Content";
 import Setup from "./Setup";
 import React, {Component} from 'react';

 import { connect } from 'dva';
 import classnames from 'classnames';
 import { bindActionCreators } from 'redux';
 import editorActions from '../../../../actions/Editor/editor';
 
 class Property extends Component{
    constructor(props) {
        super(props);
        this.state = {             
            activeTab: "content"
        };
    }
    updateState(state, value){
        let param = {};
        param[state] = value;

        this.setState(param);
    }
    handleOnChangeTab(e){
        let element = $(e.target || e.srcElement),
            tab = element.attr("data-tab");
        this.updateState("activeTab", tab);
    }
    render(){
        let activeTab = this.state.activeTab;
        const {page,pageJump,widgets,timelines} = this.props;
        return (
            <div className="property-container property">
                <div className="template-property">
                    <header>
                        <ul>
                            <li onClick={(e) => this.handleOnChangeTab(e)} data-tab="content" className={activeTab == "content" ? "selected" : ""}>{$._("Replace AR content")}</li>
                            <li onClick={(e) => this.handleOnChangeTab(e)} data-tab="setup" className={activeTab == "setup" ? "selected" : ""}>{$._("Property setting")}</li>
                        </ul>
                    </header>
                    <div className="template-property-content">
                        <Content activeTab={activeTab} timelines={timelines} widgets={widgets} />
                        <Setup activeTab={activeTab} page={page} pageJump={pageJump} />
                    </div>
                </div>
            </div>
        )
    }
 }

 const mapStateToProps = ({ editor, widgets, timelines ,pages, pageJump}) => {
    const pageId = editor.selectedPageId;
    return {
      status: editor.status,
      widgets: widgets.filter(w => w.page_id === pageId),
      timelines: timelines.filter(t => t.page_id === pageId),
      page: pages.filter(p => p.page_id === pageId)[0],
      pages,
      pageJump,
      selectedPageId: pageId
    };
};

 const mapDispatchToProps = (dispatch) => {
   return bindActionCreators({editorActions}, dispatch);
 };


 export default connect(mapStateToProps, mapDispatchToProps)(Property);
 module.exports = Property;
